<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: jyq
 * @LastEditTime: 2022-01-08 18:09:57
-->
<template>
  <div ref="right1_container" style="height:95%"> </div>
</template>
<script>
import { Area } from '@antv/g2plot';
import {get} from "../../../utils/request"
import moment from "moment"
import {mapState} from 'vuex'
export default {
  data(){
    return{
       dataArr:[],
       chart:null
    }
  },
  mounted(){
    this.initChart();
  },
   computed: {
    ...mapState(['ed'])
  },
  watch: {
    ed:{
      async handler(params){
        // 重新加载数据
        await this.initData();
        this.changeData();
      },
      deep:true
    }
  },
  methods:{
      changeData(){
      if(this.chart){
        this.chart.changeData(this.dataArr)
      }
    },
  //  async initData(){
  //    let url = "/dashboard/pageQueryTodayData"
  //     let params = {
  //       page:1,
  //       pageSize:20,
  //       ...this.ed
  //     }
  //     let resp = await get(url,params);
  //     let data = resp.data.list.map(item => {
  //       return {
  //         dateTime:moment(item.insert_time).format('hh:mm'),
  //         humidity:+item.humidity
  //       }
  //     })
  //     this.dataArr = data;
  //   },
       async initData(){
          let params = {
        page:1,
        pageSize:20,
        ...this.ed
      }
       await get("/dashboard/pageQueryTodayData",params).then(res=>{
          console.log(res)
         res.data.list.forEach(item => {
           item.dateTime = moment(item.insert_time).format('hh:mm')
         });
         this.dataArr=res.data.list

      })
    },
  initChart(){
       const area = new Area(this.$refs.right1_container,{
          data:this.dataArr,
      xField: 'dateTime',
      yField: 'humidity',
      xAxis: {
          label: {
            rotate: -45,
            offset: 10,
            style: {
              fill: "white",
              fontFamily: "TencentSans",
              fontSize: 16,
            },
          },
        },
    });
    area.render();
    this.chart = area
    },
}
}
</script>
<style scoped>

</style>